<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas 大屏效果图</title>
    <style>
    *{margin:0;padding:0;}
    body{text-align:center;background-color:#000;}
    </style>
</head>
<script src='base.js' lang="utf-8"></script>
<body>
    <canvas id="canvas" width="700" height="500" style="background:#000;"></canvas>
     <button id="fullScreenBtn">全屏</button>
    <script>
  
    globalX=-10;
    globalY=-130; 
      function myDraw(context){
      		
		      barGraph.draw();
		      drawCircle.draw();
		      
		      table.draw();
      		myLineChart.draw();
      		
      		var lineChartData = myLineChart.data;
      		
      		for(var i=0 ;i< lineChartData.length;i++){
      				lineChartData[i].y +=parseInt(Math.random()*4-2)
      		}
      		
      		myLineChart.reflashData(lineChartData)
      		
      		
         
           
      } 
        
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            canvas.height= window.screen.height 
            canvas.width= window.screen.width 
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.fillStyle="#0ff";
            context.fillRect(0,0,canvas.width,canvas.height);
            context.translate(0.5,0.5);
            
					       
					            
					       barGraph= new  BarGraph({
					       		context:context,
					       	
					       		x1:80,
					       		y1:220,
					       		x2:600,
					       		title:'缓慢变化',
					       	  y2:450,
					       	  xName:'月份',
					       	  yName:"金额",
					       	  
					       	  data:[{lab:'1月',value:1300},{lab:'2月',value:2000},{lab:'3月',value:3000},{lab:'4月',value:3000},
					       	  {lab:'5月',value:2000},{lab:'6月',value:1000},{lab:'7月',value:1300},{lab:'8月',value:1500},
					       	  {lab:'9月',value:2000},{lab:'10月',value:5000},{lab:'11月',value:1000},{lab:'12月',value:1000}]
					      });   
					      drawCircle=new DrawCircle({
					         		context:context,
					           		x:350,
					           		y:630,
					           		r:100,
					           		color : ["#27255F","#ff00ff","#3666B0","#2CA8E0","#000000"],
					           		data :[5,30,15,30,20],
					           		name : [5,30,15,30,20]
					     });   
					            
					     table=   new  Table({context:context,
					          		x1:630,
					           		y1:550,
					           		x2:1200,
					           	  y2:650,
					           	  data:[[1,2,3,4,5],
					           	  [1,2,32,4,52],
					           	  [1,2,3,42,5],
					           	  [12,2,3,4,5],
					           	   [12,2,3,4,5]
					           	  ]});        
					            
							   myLineChart = new LineChart({context:context,
							          		x1:630,
							           		y1:220,	title:'实时数据性能演示',
							           		x2:1200,
							           	  y2:450,
							           	  data:[
										          {x: "2015-04-24", y: 13400},
										          {x: "2015-04-25", y: 13380},
										          {x: "2015-04-26", y: 13370},
										          {x: "2015-04-27", y: 13370},
										          {x: "2015-04-28", y: 13380}
										        ]
							     });
		     
		     
		   
       	  
         
            
            
            //动画循环
			        (function drawFrame(){
			            window.requestAnimationFrame(drawFrame);
			            context.clearRect(0, 0, canvas.width, canvas.height);
			            context.fillStyle="#0ff";
			            context.fillRect(0,0,canvas.width,canvas.height);
			            myDraw(context);
			        }());
			        
			         setInterval(function(){
			         
					         var data = barGraph.config.data;
					         for(var i=0;i<data.length;i++){
					         		data[i].value+=100*Math.random()-50;
					         		if(data[i].value<100){
					         			data[i].value=100;
					         		}
					         		
					         		data[i].value=parseInt(data[i].value);
					         
					         }
			         			barGraph.reflashData(data);
			         },1500);
			         
			         setInterval(function(){
					          var x1=100*Math.random();
					          var x2=100*Math.random();
					          var x3=100*Math.random();
					          var x4=100*Math.random();
					          var x5=100*Math.random();
					          var sum=x1+x2+x3+x4+x5;
					          x1=x1/sum*100;
					          x2=x2/sum*100;
					          x3=x3/sum*100;
					          x4=x4/sum*100;
					          x5=x5/sum*100;
					        	var data =[x1,x2,x3,x4,x5];
					      
			         			drawCircle.reflashData(data);
			         },1700);
			        
            
   }
    </script>
</body>

<script src='Fullscreen.js' lang="utf-8"></script>
<script src='component.js' lang="utf-8"></script>
</html>